<template>
  <button @click="resumeBtn()">{{ number === 0 ? '发送验证码' : number }}</button>
  <button @click="pauseBtn()">停止定时器</button>
</template>

<script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/core'
export default {
  setup () {
    const number = ref(0)
    /*
      useIntervalFn 对比 传统的 setInterval 有以下优点：
        1. 可通过 { immediate: false } 不立刻执行
        2. 组件卸载的时候会自动清理定时器
        3. 返回的 resume 函数用于启动定时器，pause 函数用于停止定时器
    */
    const { resume, pause } = useIntervalFn(() => {
      console.log('定时器正在运行中，组件卸载自动停止...')
      number.value--
      if (number.value <= 0) {
        pause()
      }
    }, 1000, { immediate: false })

    const resumeBtn = () => {
      // 初始化
      if (number.value === 0) {
        number.value = 60
      }
      resume()
    }

    const pauseBtn = () => {
      pause()
    }

    return { resumeBtn, number, pauseBtn }
  }
}
</script>
